<template>
  <a-space class="message-list" direction="vertical" size="middle">
    <MessageItem
      v-for="(item, index) in messageList"
      :key="index"
      :title="item.activityInfoVo.activityName"
    >
      <template v-slot:time> {{ item.activityInfoVo.time }} </template>
      <template v-slot:content>
        <div class="check-container">
          <div class="check-message-container" @click="jumpToInfo(item.activityInfoVo.activityId)"
         style="cursor:pointer;user-select:none">
            <p>
              {{ item.userVo.userName }} 申请参与活动 | 
              {{ item.activityInfoVo.activityName }}
            </p> 
           
          </div>
          <div class="check-button-container">
            <a-popconfirm
              title="是否通过这条申请?"
              ok-text="通过"
              cancel-text="拒绝"
              @confirm="confirm($event, item)"
              @cancel="cancel($event, item)"
            >
              <a-button type="primary" size="large"> 审核 </a-button>
            </a-popconfirm>
          </div>
        </div>
      </template>
    </MessageItem>
  </a-space>
</template>

<script>
import MessageItem from "./messageItem";
import RequestUtil from "../../utils/requestUtils";

export default {
  name: "MessageList",
  components: {
    MessageItem,
  },
  props: {
    messageList: Array,
  },
  data() {
    return {};
  },
  methods: {
    jumpToInfo(activityId) {
      this.$router.push({
        path: `/activities/${activityId}`,
      });
    },
    confirm(event, item) {
      let popconfirm = event.currentTarget.parentElement.parentElement;

      let that = this;

      RequestUtil.requestPassApply(
        that,
        popconfirm,
        item.userVo.id,
        item.activityInfoVo.activityId,
        "true"
      );
    },
    cancel(event, item) {
      let popconfirm = event.currentTarget.parentElement.parentElement;

      let that = this;

      RequestUtil.requestPassApply(
        that,
        popconfirm,
        item.userVo.id,
        item.activityInfoVo.activityId,
        "false"
      );
    },
  },
};
</script>

<style lang="less" scoped>
.check-container {
  display: flex;
  .check-message-container {
    width: 90%;
    // span {
    //   word-break: break-all;
    // }
    word-break: break-all;
  }
  .check-button-container {
    width: 10%;
    * {
      float: right;
    }
  }
}
</style>